<template>
  <div class="role">
    <!-- 添加课程 -->
    <div class="add-role">
      <!-- 添加按钮 -->
      <el-button type="primary" @click="addLesson">添加课程</el-button>
      <!-- 添加课程信息框 -->
      <div class="add-dialog">
        <el-dialog
          ref="addLesson"
          title="添加课程"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <el-form :model="newForm" ref="addForm"
            ><el-form-item label="课程ID" :label-width="formLabelWidth">
              <el-input v-model="newForm.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="标题" :label-width="formLabelWidth">
              <el-input v-model="newForm.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input v-model="newForm.remark" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="课程号" :label-width="formLabelWidth">
              <el-input
                v-model="newForm.lessonNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="单价" :label-width="formLabelWidth">
              <el-input v-model="newForm.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-input v-model="newForm.status" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="版本" :label-width="formLabelWidth">
              <el-input v-model="newForm.version" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="浏览次数" :label-width="formLabelWidth">
              <el-input
                v-model="newForm.viewCount"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="购买数量" :label-width="formLabelWidth">
              <el-input
                v-model="newForm.buyCount"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="封面" :label-width="formLabelWidth">
            <el-upload
              class="upload-demo"
              action="https://kk-books.oss-cn-hangzhou.aliyuncs.com/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="picture"
              :auto-download="false"
              :limit="1"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item> -->

            <el-form-item label="是否禁用" :label-width="formLabelWidth">
              <el-switch v-model="newForm.isDeleted"></el-switch>
            </el-form-item>
            <el-form-item label="创建时间" :label-width="formLabelWidth">
              <el-date-picker
                v-model="newForm.gmtCreate"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="修改时间" :label-width="formLabelWidth">
              <el-date-picker
                v-model="newForm.gmtModified"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth">
              <el-button type="primary" @click="onSubmit('addForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
    <!-- 搜索 -->
    <div class="top-search">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="search.title" placeholder="课程名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容展示 -->
    <div class="mid-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="课程编号"> </el-table-column>
        <el-table-column prop="cover" label="课程封面">
          <template slot-scope="scope">
            <el-image :src="scope.row.cover" style="width: 100"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="课程标题"> </el-table-column>
        <el-table-column prop="lessonNum" label="课程号"> </el-table-column>
        <el-table-column prop="buyCount" label="购买数量"> </el-table-column>
        <el-table-column prop="remark" label="拥有权限"
          ><template slot-scope="scope">
            {{ scope.row.remark ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column prop="isDeleted" label="是否禁用">
          <template slot-scope="scope">
            {{ scope.row.isDeleted ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            {{ scope.row.status === 'Normal' ? '已发布' : '未发布' }}
          </template>
        </el-table-column>
        <el-table-column prop="version" label="版本"> </el-table-column>
        <el-table-column prop="viewCount" label="浏览次数"> </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间"> </el-table-column>
        <el-table-column prop="gmtModified" label="修改时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="changeRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      pagesize: 2,
      total: 0,
      tableData: [],
      search: {
        beginDate: '',
        endDate: '',
        roleName: '',
      },
      pages: 0,
      dialogVisible: false,
      newForm: {},
      //控制表单元素与左侧框的距离
      formLabelWidth: '50px',
      fileList: [],
      ischanged: false,
    }
  },
  methods: {
    getter() {
      this.$http({
        method: 'post',
        url: `/course/list/${this.current}/${this.pagesize}`,
        data: this.search,
      }).then((res) => {
        let { data } = res.data
        let { pages, total, records } = data
        this.pages = pages
        this.tableData = records
        this.total = total
      })
    },
    addLesson() {
      this.ischange = false
      this.dialogVisible = true
    },
    changeRow(index, rows) {
      this.ischange = true
      this.dialogVisible = true
      this.newForm = rows[index]
    },
    deleteRow(index, rows) {
      this.$http({
        method: 'DELETE',
        url: `/course/${rows[index].id}`,
      }).then((res) => {
        let { code, msg } = res.data
        if (code === 2000) {
          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      })
      rows.splice(index, 1)
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.getter()
    },
    handleCurrentChange(val) {
      this.current = val
      this.getter()
    },
    onSearch() {
      this.current = 1
      this.getter()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.newForm = {}
          done()
        })
        .catch((_) => {})
    },
    onSubmit() {
      if (!this.ischange) {
        this.$http({
          method: 'POST',
          url: '/course',
          data: this.newForm,
        }).then((res) => {
          let { code, data, msg } = res.data
          if (code === 2000) {
            this.$message.success(msg)
          } else {
            this.$message.error(msg)
          }
          this.getter()
          this.newForm = {}
        })
      } else {
        this.$http({
          method: 'put',
          url: '/course',
          data: this.newForm,
        }).then((res) => {
          console.log(res)
        })
      }

      this.dialogVisible = false
    },
    resetForm() {
      this.newForm = {}
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
  },
  mounted() {
    this.getter()
  },
}
</script>

<style lang="less" scope>
.el-main {
  text-align: left !important;
}
.add-role,
.top-search {
  float: left;
}
.top-search {
  margin-left: 10px;
}
.el-date-editor.el-input {
  width: 100%;
}
.add-dialog {
  .el-input {
    width: 80%;
  }
}
</style>
